<template>
  <div class="var__main">
    <a-button type="primary" size="large" @click="varShow = !varShow"
      >变量</a-button
    >
    <a-card title="变量选择" class="var__card" v-show="varShow">
      <!-- 流程变量 -->
      <div class="v_body">
        <div
          class="variableType"
          v-for="(item, index) in varOptions"
          :key="index"
        >
          <a-input
            v-model="item.label"
            size="small"
            style="width: 100px; margin-right: 3px"
            placeholder="别名"
            :disabled="true"
          />
          <div class="variableTypeKay">{{ item.value }}</div>
          <a-button
            class="variableTypeIcon"
            size="mini"
            type="outline"
            @click="copyVar(item)"
            >复制</a-button
          >
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
// import { copyToClipboard } from '@/views/workflow/WorkflowCanvas/nodeOutput/utils'
import { Message } from "@arco-design/web-vue";

export default {
  props: {
    varOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      varShow: false,
    };
  },
  methods: {
    copyVar(record) {
      const { value, isExpression } = record;
      let text = "";
      if (isExpression) {
        // 表达式
        text = value;
      } else {
        text = "${" + value + "}";
      }
      // copyToClipboard(text, Message)
    },
  },
};
</script>

<style lang="less" scoped>
.var__main {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}

.var__card {
  margin-top: 20px;
  width: 430px;
}

.v_body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 447px;
  padding: 0px 30px 0px 30px;

  .variableType {
    display: flex;
    border-bottom: 1px solid #e9e9e9;
    padding: 5px;
    margin-left: 5px;

    .variableTypeKay {
      width: 282px;
    }

    .variableTypeValue {
      margin-left: 10px;
      width: 170px;
    }

    .variableTypeIcon {
      margin-left: 10px;
      line-height: 24px;
    }
  }

  .variableType:hover {
    border-bottom: 1px solid #1890ff;
  }
}
</style>
